<template>
  <div v-if="urls.length > 0" class="image-preview">
    <div class="image-item" v-for="(url, index) in urls" :key="index" @click="imagePreview(url)">
      <image :src="url" mode="aspectFill" />
    </div>
  </div>
</template>
<script lang="ts">
import { computed, toRefs, PropType } from 'vue';
import Taro from '@tarojs/taro';
import './index.less';

export default {
  props: {
    data: {
      type: Array as PropType<string[]>,
      default: () => [],
    },
  },

  setup(props) {
    const { data } = toRefs(props);

    const urls = computed(() => {
      return data.value.map((v, i) => {
        if (!v) return '';
        if (v.indexOf('?') > -1) {
          return `${v}&v=${i}`;
        }
        return `${v}?v=${i}`;
      });
    });

    const imagePreview = (url) => {
      Taro.previewImage({
        urls: urls.value,
        current: url,
      });
    };

    return {
      urls,
      imagePreview,
    };
  },
};
</script>
